<template>
<div>
  <el-table :data="pageData.list"
  v-loading="tableLoading"
  @row-click="rowClicked"
  @selection-change="handleSelectionChange"
  ref="table">
  <el-table-column
    type="selection"
    width="auto">
  </el-table-column>
  <el-table-column v-for="item in items"
    :key="item.prop"
    :label="item.label"
    :prop="item.prop"
    width="auto">
  </el-table-column>
</el-table>
<!--分页-->
  <el-pagination
    :current-page="search.pageNo"
    :page-sizes="[5, 10, 15, 20]"
    :page-size="search.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageData.total">
  </el-pagination>
</div>
</template>
<script>
import ajax from '../../../../../api/ajax/ajax'
import api from '../../../../../api/url'
export default {
  name: 'code-map-gird',
  data () {
    return {
      list: [],
      tableLoading: false, // 数据加载
      pageData: {
        total: 0,
        list: []
      },
      currentRow: null, // 当前行
      selections: [], // 所有的选择
      search: {
          type: Object,
          pageNo: 1, // 当前页号
          pageSize: 10, // 每页显示记录数
          keyword: null // 关键字
      }
    }
  },
  props: {
    items: {
      type: Array,
      default () {
        return [
          {
            prop: 'code_id1',
            label: '代码ID_1'
          },
          {
            prop: 'code_value1',
            label: '代码取值_1'
          },
          {
            prop: 'code_id2',
            label: '代码ID_2'
          },
          {
            prop: 'code_value2',
            label: '代码取值_2'
          }
        ]
      }
    }
  },
  created () {
      this.getData()
  },
  methods: {
    // 当某一行被点击时会触发该事件
    rowClicked (row, el) {
      this.currentRow = row
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange (selection) {
      this.selections = selection
      this.list = []
      for (let i = 0; i < selection.length; i++) {
        let remdata = {
          code_id1: selection[0].code_id1,
          code_value1: selection[0].code_value1,
          code_id2: selection[0].code_id2,
          code_value2: selection[0].code_value2
        }
        this.list.push(remdata)
      }
    },
    getSelections () {
        return this.selections
    },
    getList () {
      return this.list
    },
    clearSelection () {
      this.$refs.table.clearSelection()
    },
    // 通过关键字搜索
    getDataByKeyword (keyword) {
      this.search.keyword = keyword
      this.getData()
    },
    // 获取页面数据
    getData () {
      // 数据加载中
      this.tableLoading = true
      ajax.post(api.SELECT_METACODEMAP_LIST_FOR_PAGE, this.search).then(res => {
        this.pageData = res.data
        this.tableLoading = false
      }).catch(e => {
        console.error('获取数据发生错误！')
      })
    }
  }
}
</script>
<style lang="stylus" ref = "stylesheet/stylus">

</style>
